<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML title</title>
    <link rel="stylesheet" href="css/spa.css">
    <style>
        .spa-shell-head, .spa-shell-head-logo, .spa-shell-head-acct, .spa-shell-head-search,
        .spa-shell-main, .spa-shell-main-nav, .spa-shell-main-content,
        .spa-shell-foot, .spa-shell-chat,
        .spa-shell-modal {
            position: absolute;
        }
        /*header*/
        .spa-shell-head {
            top:0;
            left:0;
            right:0;
            height: 40px;
        }
        .spa-shell-head-logo {
            top:4px;
            left: 4px;
            height: 32px;
            width: 128px;
            background: orange;
        }
        .spa-shell-head-acct {
            top: 4px;
            right: 0;
            width: 64px;
            height: 32px;
            background: green;
        }
        .spa-shell-head-search {
            top: 4px;
            right: 64px;
            width: 248px;
            height: 32px;
            background: blue;
        }

        /*main*/
        .spa-shell-main {
            top:40px;
            left:0;
            bottom: 40px;
            right:0;
        }
        .spa-shell-main-nav, .spa-shell-main-content {
            top: 0;
            bottom: 0;
        }
        .spa-shell-main-nav {
            width: 250px;
            background-color: #eeeeee;
        }
        .spa-x-closed .spa-shell-main-nav {
            width: 0;
        }
        .spa-shell-main-content {
            left: 250px;
            right: 0;
            background: #dddddd;
        }
        .spa-x-closed .spa-shell-main-content {
            left: 0;
        }
        .spa-shell-foot {
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
        }
        .spa-shell-chat {
            bottom: 0;
            right: 0;
            width: 300px;
            height: 15px;
            background: red;
            z-index: 1;
        }
        .spa-shell-modal {
            margin-top: -200px;
            margin-left: -200px;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 400px;
            background: #ffffff;
            border-radius: 3px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div id="spa">
        <!--header-->
        <div class="spa-shell-head">
            <!--logo-->
            <div class="spa-shell-head-logo"></div>
            <!--account-->
            <div class="spa-shell-head-acct"></div>
            <!--search-->
            <div class="spa-shell-head-search"></div>
        </div>

        <!--main-->
        <div class="spa-shell-main">
            <!--nav-->
            <div class="spa-shell-main-nav"></div>
            <!--content-->
            <div class="spa-shell-main-content"></div>
        </div>

        <!--foot-->
        <div class="spa-shell-foot"></div>

        <!--chat-->
        <div class="spa-shell-chat"></div>

        <!--modal 模态框-->
        <div class="spa-shell-modal"></div>
    </div>
</body>
</html>